<template>
  <div class="ztree">
    <div class="znode" :style="getDetph">
      <div class="znodeLabel" @click="toggleOpen">
        <div v-if="citems.children" class="zplusMinuIcon">{{opened?'-':'+'}}</div>
        <div v-else class="zplusMinuIcon"></div>
        <div class="zchecker">
          <cube-checkbox v-model="citems.selected"></cube-checkbox>
        </div>
        <div class="zlabel">{{citems.name}}</div>
      </div>
      <div v-if="opened">
        <zTree v-if="item.children" :citems="item" :list="item.children" v-for="(item,index) in list" :key="index" :detph="detph+1">
        </zTree>
        <div v-else>
          <div v-for="(item, index) in list" :key="index">
            <div class="zplusMinuIcon"></div>
            <div class="zchecker">
              <cube-checkbox v-model="item.selected"></cube-checkbox>
            </div>
            <div class="zlabel">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'zTree',
  components: {
    
  },
  computed: {
    getDetph() {
      return `transform:translate(${this.detph * 20}px)`;
    }
  },
  data () {
    return {
      opened: true,
    }
  },
  props: {
    citems: {
      type: Object,
      default() {
        return {
          name: '',
          id: ''
        }
      }
    },
    list: {
      type: Array
    },
    detph: {
      type: Number,
      default: 0
    }
  },
  created () {

  },
  mounted() {
    console.log(this.list)
    // this.citems = this.list[0];
  },
  watch: {
    // citem (val) {
    //   this.citems = val;
    // }
  },
  methods: {
    toggleOpen: function() {
      this.opened = !this.opened;
    }
  }
}
</script>

<style scoped lang="scss">
.ztree {
  font-size: 14px;
  .znode {
    .znodeLabel {
      display: flex;
      align-items: center;
      height: 26px;
      cursor: pointer;
      .zplusMinuIcon {
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 20px;
      }
      .zchecker {
        /deep/ {
          .cube-checkbox {
            padding: 0 3px 0 2px;
            .cube-checkbox-label {
              display: none;
            }
          }
        }
      }
    }
  }
}

</style>
